<template>
  <div class="payType">
    <div class="content">
      <div class="title">计费管理 / 缴费类性管理</div>
      <el-row>
        <el-col :span="4">
          <el-input v-model="queryInfo.paymoney" placeholder="项目价格" clearable @clear="getUnit()"
            style="width: 100%; max-width: 200px;"></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="queryInfo.paystatus" clearable @clear="getUnit()" placeholder="通知状态"
            style="width: 100%; max-width: 200px;">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col class="btn-col" :span="16">
          <span class="title">{{ selectedNode ? selectedNode.label : '' }}</span>
          <el-button type="primary" @click="getUnit()" icon="el-icon-search">查询</el-button>
          <el-button type="success" @click="add()" icon="el-icon-plus">新增</el-button>
          <el-button type="primary" @click="getUnit()" icon="el-icon-refresh">刷新</el-button>
          <el-button type="primary" @click="exportExcel" icon="el-icon-upload2">导出</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-tree :data="treeData" @node-click="handleNodeClick" default-expand-all="true"></el-tree>
        </el-col>
        <el-col :span="12" style="height: 500px; overflow-x: auto; padding: 10px;">
          <el-table ref='multipleTable' :data="unitList" tooltip-effect="dark" style="width: 100%" v-loading="loading"
            height="452" label-width="120px">
            <el-table-column label="缴费项目名称" align="center" width="150">
              <template slot-scope="scope">{{ scope.row.payname }}</template>
            </el-table-column>
            <el-table-column label="缴费项目优先级" align="center" width="120">
              <template slot-scope="scope">{{ scope.row.paylevel }}</template>
            </el-table-column>
            <el-table-column label="项目用量/时长" align="center" width="120">
              <template slot-scope="scope">{{ scope.row.paynum }}</template>
            </el-table-column>
            <el-table-column label="项目价格" align="center" sortable prop="unitprice" width="100">
              <template slot-scope="scope">{{ scope.row.paymoney }}</template>
            </el-table-column>
            <el-table-column label="创建时间" align="center" sortable prop="createtime" width="150">
              <template slot-scope="scope">{{ formatDateTime(scope.row.paytime) }}</template>
            </el-table-column>
            <el-table-column label="通知人" align="center" width="100">
              <template slot-scope="scope">{{ scope.row.username }}</template>
            </el-table-column>
            <el-table-column label="状态" align="center" width="100">
              <template slot-scope="scope">{{ getStatusLabel(scope.row.paystatus) }}</template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="120">
              <template slot-scope="scope">
                <el-button size="mini" type="text" style="color: #62a8ea;"
                  @click="unitNotice(scope.$index, scope.row)">通知</el-button>
                <el-button size="mini" type="text" style="color: #f56c6c;"
                  @click="unitDetail(scope.$index, scope.row)">查看</el-button>
                <el-button size="mini" type="text" style="color: #f56c6c;"
                  @click="unitDelete(scope.$index, scope.row)">作废</el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination style="text-align: right; margin-top: 10px;" :page="queryInfo.currPage"
            :componentTotal="unitTotal" @changeRows="setRows" @changePage="setPage">
          </pagination>

          <el-dialog title="计费通知" :visible.sync="dialogTableVisible">
            <div class="top">
              <el-input v-model="queryInfo.username" placeholder="" clearable @clear="getNotice()"
                style="width: 200px;"></el-input>
              <el-button type="primary" @click="getNotice()" icon="el-icon-search">搜索</el-button>
              <el-button type="warning" @click="reset" icon="el-icon-refresh-right">重置</el-button>
            </div>

            <el-table ref='multipleTable' :data="noticeList" tooltip-effect="dark" style="width: 100%"
              label-width="120px" v-loading="loading">
              <el-table-column label="序号" align="center">
                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
              </el-table-column>
              <el-table-column label="用户账号" align="center">
                <template slot-scope="scope">{{ scope.row.username }}</template>
              </el-table-column>
              <el-table-column label="家庭地址" align="center">
                <template slot-scope="scope">{{ scope.row.homeaddress }}</template>
              </el-table-column>
              <el-table-column label="类型" align="center">
                <template slot-scope="scope">{{ scope.row.type == 1 ? '管理员' : '普通用户' }}</template>
              </el-table-column>
              <el-table-column label="缴费状态" align="center">
                <template slot-scope="scope">{{ getStatusLabel(scope.row.parkstatus) }}</template>
              </el-table-column>
            </el-table>
            <pagination style="text-align: right; margin-top: 10px;" :page="queryInfo.currPage"
              :componentTotal="noticeTotal" @changeRows="setRows" @changePage="setPage">
            </pagination>
            <el-footer class="dialog-footer" style="text-align: right;">
              <el-button type="primary" @click="dialogTableVisible = false">取消</el-button>
              <el-button type="primary" @click="updateNotice()">通知</el-button>
            </el-footer>
          </el-dialog>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { excelExportUseJson, excelImport } from "../../assets/js/xlsx";
export default {
  data() {
    return {
      treeData: [
        {
          label: '缴费项目',
          description: '这是节点1的描述',
          children: [
            {
              label: '电费项目',
              description: '这是子节点1-1的描述',
              children: [
                { label: '电费目录表', id: 'electricityCatalog' },
              ]
            },
            {
              label: '水费项目',
              description: '这是子节点1-2的描述',
              children: [
                { label: '水费固定月目录表' },
                { label: '水费按量计价目录表' },
              ]
            },
            {
              label: '天然气项目',
              description: '这是子节点1-2的描述',
              children: [
                { label: '天然气目录表' },
              ]
            },
            {
              label: '物业费项目',
              description: '这是子节点1-2的描述',
              children: [
                { label: '物业费目录表' },
              ]
            },
            {
              label: '宽带费项目',
              description: '这是子节点1-2的描述',
              children: [
                { label: '宽带费目录表' },
              ]
            }
          ]
        }
      ],
      queryInfo: {
        c_id: 7,
        paymoney: '',
        paystatus: '',
        currPage: 0,
        pageNum: 9,
        username: ''
      },
      noticeList: [],
      noticeTotal: 0,
      dialogTableVisible: false,
      unitTotal: 0,
      selectedNode: null,
      unitList: [],
      loading: false,
      statusOptions: [
        { value: '1', label: '未通知' },
        { value: '2', label: '已通知' },
      ],
      listHeader: {
        payname: "缴费项目名称",
        paylevel: "缴费项目优先级",
      },
    };
  },
  computed: {
    getStatusLabel() {
      return (paystatus) => {
        const status = this.statusOptions.find(option => option.value == paystatus);
        return status ? status.label : '未通知';
      };
    }
  },
  components: {
    Pagination
    // 其他组件
  },
  methods: {
    exportExcel() {
      excelExportUseJson(this.unitList, this.listHeader, "数据列表");
    },
    importExcel(file) {
      console.log(file)
      excelImport(file.raw, 'json').then(res => {

        res = res.map(item => {
          let newUserFrom = {};
          for (let [headerKey, headerVal] of Object.entries(this.listHeader)) {
            newUserFrom[headerKey] = item[headerVal]
          }
          newUserFrom.passWord = "123456"
          return newUserFrom
        })
        console.log(res)
        // res.map(el => {
        //   this.addForm(el)
        // })
      })
    },
    // 分页器
    setRows(val) {
      this.queryInfo.pageNum = val;
      this.getUnit();
    },
    setPage(val) {
      this.queryInfo.currPage = val;
      this.getUnit();
    },
    handleNodeClick(data) {
      this.selectedNode = data;
      this.queryInfo.c_id = this.getCIdByLabel(data.label);
      this.getUnit();
    },
    getCIdByLabel(label) {
      switch (label) {
        case '电费目录表':
          return 7;
        case '水费固定月目录表':
          return 8;
        case '水费按量计价目录表':
          return 9;
        case '天然气目录表':
          return 12;
        case '物业费目录表':
          return 11;
        case '宽带费目录表':
          return 12;

        default:
          return 7; // 默认值
      }
    },
    async getUnit() {
      this.loading = true;

      const { data: res } = await this.axios.get('cost/getCostData', {
        params: this.queryInfo
      });
      this.unitList = res.data;
      this.unitTotal = res.total;
      this.loading = false;
    },
    add() {
      // 录入逻辑
      this.$router.push({ name: 'payAdd', query: { type: 'ADD', paystatus: 2 } })
    },
    unitNotice() {
      this.dialogTableVisible = true;
      this.getNotice();
    },
    async getNotice() {
      const { data: res } = await this.axios.get("/users/getUserList",
        {
          params: {
            username: this.queryInfo.username,
            currPage: 0,
            pageNum: 7
          },
        }
      )
      console.log(res.data);
      this.noticeList = res.data;
      this.noticeTotal = res.total;
    },
    async updateNotice() {
      const { data: res } = await this.axios.get("/cost/updateCostData", {
        params: {
          c_id: 1370,
          paystatus: this.queryInfo.paystatus,
          token: sessionStorage.token
        }
      })
      console.log(res);
      this.$message({
        type: 'success',
        message: '通知成功!'
      });
      this.dialogTableVisible = false;
    },
    reset() {
      // 重置逻辑

      this.getUnit();
    },
    formatDateTime(dateTime) {
      if (!dateTime) return '';
      return new Date(dateTime).toLocaleString();
    },
    unitDetail(index, row) {
      // 详情逻辑
      this.id = row.id;
      this.$router.push({ name: 'payAdd', query: { type: 'DETAIL', detailId: this.id } })
    },
    async unitDelete(index, row) {
      this.id = row.id;
      const { data: res } = await this.axios.get("/cost/delCostData", {
        params: {
          id: this.id,
          token: sessionStorage.token
        }
      })
      console.log(res);
      this.$confirm('确认归档该单元？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getUnit();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      })
    },
  },
  mounted() {
    // 初始化时选择默认节点
    const defaultNode = this.treeData[0].children[0].children[0];
    this.handleNodeClick(defaultNode);
  }
};
</script>

<style scoped lang="scss">
.payType {
  margin-top: 40px;
  margin-left: 28px;
  padding: 15px 20px;

  .content {
    width: 100%;
    background: #ffffff;

    .title {
      width: 100%;
      color: #000000;
      font-size: 16px;
      font-weight: 600;
    }

    .el-row {
      width: 90%;

      .btn-col {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          margin-right: auto;
          font-size: 24px;
        }
      }
    }

    .top {
      display: flex;

    }
  }
}
</style>